<link rel="stylesheet" href="../css/main.css">


<!-- 模型一 -->
<div class="layout">
  <section>
    <h2>介绍</h2>
    <h3>什么是vue？</h3>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，设计上自下而上逐层应用。Vue核心库只关注视图层，易于上手，更方便与第三方库或既有项目整合。本记录只记录element版本的vue开发。整体样式以element-ui框架为辅，vue<strong>不支持</strong>IE8及以下版本。</p>
    <p>使用必须vue获取id对象初始化，同类型产品有React和Angular。</p>

    <h3>什么是element-ui？</h3>
    <p>element是中国公司<strong>饿了吗</strong>开发的一套简单易用的web框架，js有Vue、React、Angular版本。</p>

    <h2>安装</h2>
    <h3>vue安装</h3>
    <p>此版本为最新版，可用于学习。</p>
    <div class="context-box">
      <xmp>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      </xmp>
    </div>

    <p>生产环境使用以下引用，指定版本，避免不必要的兼容性问题。</p>
    <div class="context-box">
      <xmp>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
      </xmp>
    </div>

    <p>如果使用原生es模型，可以使用以下应用。</p>
    <div class="context-box">
      <xmp>
      <script type="module">
        import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
      </script>
      </xmp>
    </div>
    
    <h4>npm安装</h4>
    <div class="context-box">
      <xmp>
      npm install vue
      </xmp>
    </div>

    <h3>element-ui安装</h3>
    <p>element-ui基于vue,必须先导入vue才能使用。</p>
    <h4>npm安装</h4>
    <p>推荐使用npm方式安装,它能更好的和<a target="_blank" href="https://webpack.js.org/">webpack</a>打包工具配合使用</p>
    <div class="context-box">
      <xmp>
      npm i element-ui -S
      </xmp>
    </div>

    <h4>CDN</h4>
    <p>目前可以通过 <a target="_blank" href="https://unpkg.com/element-ui/">unpkg.com/element-ui</a> 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用</p>
    
    <div class="context-box">
      <xmp>
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      </xmp>
    </div>

    <h4>离线方案</h4>
    <p>如果想离线使用，打开js和css文件网络地址，复制内容，本地保存文件引入，特别说明：css应用了woff和tff文件，建议通过F12浏览下载。</p>

  </section>
</div>



